<template>
    <div class="container">
        <div class="header">
            <h2>水 族 箱 数 据 可 视 化</h2>
            <p>
                <b>编 号： {{ id }}</b>
            </p>
        </div>
        <div id="chart1"></div>
        <div id="chart2"></div>
        <div id="chart3"></div>
        <div id="chart4">
            <div class="details">
                <div class="title">鱼 缸 详 情</div>
                <div class="contain">鱼缸编号：<span style="color:white">{{ id }}</span></div>
                <div class="contain">当前鱼数：<span style="color:white">{{ aquariumMessages.fishNum }}</span></div>
                <div class="contain">负责人：<span style="color:white">{{aquariumMessages.charge}}</span></div>
                <div class="contain">负责人电话：<span style="color:white">{{aquariumMessages.phone}}</span></div>
            </div>
            <div class="quality">
                <div class="title">实时水质数据</div>
                <div class="contain">温度： <span style="color:white">{{ aquariumMessages.value1 }} °C</span></div>
                <div class="contain">PH： <span style="color:white">{{ aquariumMessages.value2 }}</span></div>
                <div class="contain">浑浊度： <span style="color:white">{{ aquariumMessages.value3 }} ITU</span></div>
                <div class="contain">电导率： <span style="color:white">{{ aquariumMessages.value4 }} S/m</span></div>
                <div class="contain">溶解氧： <span style="color:white">{{ aquariumMessages.value5 }}</span></div>
                <div class="contain">水质等级： <span style="color:white">良好</span></div>
            </div>
        </div>
        <div id="chart5">
            <div class="smallHeader">
                <div>水 族 箱 设 备 列 表</div>
            </div>
            <div class="tab">
                <div class="title">
                    <div>编号</div>
                    <div>设备名</div>
                    <div>状态</div>
                </div>
                <div id="list">
                    <div class="content" id="rowup">
                        <div class="item" v-for="item in EquipmentLists">
                            <div>{{ item.id }}</div>
                            <div>{{ item.type }}</div>
                            <div>{{ item.state }}</div>
                        </div>
                    </div>
                    <div class="content" id="rowupcope">
                        <div class="item" v-for="item in EquipmentLists">
                            <div>{{ item.id }}</div>
                            <div>{{ item.type }}</div>
                            <div>{{ item.state }}</div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref, reactive, toRefs } from "vue";
import * as echarts from 'echarts'
import { ApiGetNightingale, ApiGetPie, ApiGetEquipment, ApiGetMessages, ApiGetIncreaseAndDecrease } from "@/apis/echarts";
let id = ref(sessionStorage.getItem('aquarium'))
let echartInstance1: any
let echartInstance2: any
let echartInstance3: any
interface EquipmentListParm {
    id: string;
    pid: number;
    type: string;
    state: string;
    message: string;
    // gmtCreate: null;
    // gmtModified: string
}
interface aquariumMessageParm {
    charge: string;
    fishNum: number;
    phone: string;
    value1: string;
    value2: string;
    value3: string;
    value4: string;
    value5: string;
}

let EquipmentLists: EquipmentListParm[] = reactive([])
let getEquipmentList = async () => {
    let EquipmentList: EquipmentListParm[] = await ApiGetEquipment()
    EquipmentLists.push(...EquipmentList)
    EquipmentLists.forEach((item) => {
        if (item.state == "9") {
            item.state = "故障"
        } else {
            item.state = "正常"
        }
    })
}
getEquipmentList()

let aquariumMessages: aquariumMessageParm = reactive({
    charge: '',
    fishNum: 1,
    phone: '',
    value1: '',
    value2: '',
    value3: '',
    value4: '',
    value5: '',
})
let getMessages = async () => {
    let aquariumMess: aquariumMessageParm = await ApiGetMessages()
    Object.assign(aquariumMessages, aquariumMess);
    console.log(aquariumMessages)
}
getMessages()

onMounted(() => {
    async function getSpecies() {
        let { resList } = await ApiGetNightingale()
        echartInstance1 = echarts.init(document.getElementById('chart1') as HTMLElement)
        const option = {
            title: {
                text: '鱼的类型',
                top: '2%',
                left: '2%',
                textStyle: {
                    color: '#2b8fff',
                    fontSize: '14',
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}'
            },
            series: [
                {
                    name: 'Nightingale Chart',
                    type: 'pie',
                    radius: "50%",
                    center: ['50%', '60%'],
                    data: resList,
                    label: {
                        show: true,
                        color: 'white'
                    },

                }
            ]
        };
        echartInstance1.setOption(option)
        window.addEventListener("resize", function () {
            echartInstance1.resize();
        });
    }
    getSpecies()

    async function getIncreaseAndDecrease() {
        const increaseAndDecrease = await ApiGetIncreaseAndDecrease()
        const { xAxis } = increaseAndDecrease
        const { yAxis1 } = increaseAndDecrease
        const { yAxis2 } = increaseAndDecrease
        echartInstance2 = echarts.init(document.getElementById('chart2') as HTMLElement)
        const option = {
            title: {
                text: '增减情况',
                top: '2%',
                left: '2%',
                textStyle: {
                    color: '#2b8fff',
                    fontSize: '14',
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    crossStyle: {
                        color: '#fff'
                    }
                }
            },
            xAxis: {
                type: 'category',
                data: xAxis,
                axisLabel: {
                    rotate: 30,
                    textStyle: {//改变xy轴上文字的颜色
                        color: "#FFF"
                    }
                },
                axisLine: {
                    lineStyle: {//改变xy轴线条的颜色
                        color: "#FFF",
                        width: 1//这里是为了突出显示加上的
                    }
                },
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    textStyle: {
                        color: "#FFF"
                    }
                },
                splitLine: {
                    //设置条纹显示 柱状图默认yAxis(true)
                    show: true,
                    //设置lineStyle即可写入样式即可
                    lineStyle: {
                        //这里输入线条的样式
                        color: 'rgba(180, 180, 180, 0.5)',
                    }
                }
            },
            series: [
                {
                    data: yAxis1,
                    type: 'bar',
                    // barWidth: 45,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    },
                },
                {
                    data: yAxis2,
                    type: 'bar',
                    // barWidth: 45,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    },

                }
            ]
        };
        echartInstance2.setOption(option)
        window.addEventListener("resize", function () {
            echartInstance2.resize();
        });
    }
    getIncreaseAndDecrease()

    async function getHealthy() {
        let { stateCountList } = await ApiGetPie()
        echartInstance3 = echarts.init(document.getElementById('chart3') as HTMLElement)
        const option = {
            tooltip: {
                trigger: 'item',
                formatter: '{b}:\xa0\xa0\xa0{c}'
            },
            title: {
                text: '健康情况',
                top: '2%',
                left: '2%',
                textStyle: {
                    color: '#2b8fff',
                    fontSize: '14',
                }
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['30%', '60%'],
                    center: ['50%', '55%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        normal: {
                            color: function (params: any) {
                                let colorList = [
                                    "#ee6666",
                                    "#40b27d",
                                    "#fac858",
                                ]
                                return colorList[params.dataIndex]
                            }
                        }
                    },
                    label: {
                        show: true,
                        color: 'white'
                    },
                    data: stateCountList
                }
            ]
        };
        echartInstance3.setOption(option)
        window.addEventListener("resize", function () {
            echartInstance3.resize();
        });
    }
    getHealthy()

    function gundong() {
        let parent = document.getElementById('list') as HTMLElement;
        let child1 = document.getElementById('rowup') as HTMLElement;
        // var child2 = document.getElementById('rowupcope') as HTMLElement;
        // child2.innerHTML = child1.innerHTML;
        let i = 0;
        setInterval(function () {
            if (parent.scrollTop >= child1.scrollHeight) {
                i = 0;
                parent.scrollTop = i;
            } else {
                i++;
                parent.scrollTop = i;
            }
        }, 45);
    }
    gundong()


})

onBeforeUnmount(() => {
    if (echartInstance1) {
        echartInstance1.dispose()
        echartInstance2.dispose()
        echartInstance3.dispose()
    }

})
</script>
<style scoped lang="scss">
.container {
    width: 100%;
    height: 100%;
    background-color: #15213D;

    .header {
        background: url('@/assets/header.png') no-repeat;
        background-position: center;
        background-size: 80% 100%;
        width: 100%;
        height: 12%;
        position: relative;
        color: white;

        h2 {
            position: absolute;
            left: 49%;
            top: 15%;
            transform: translate(-50%, -50%);
        }

        p {
            position: absolute;
            left: 47%;
            top: 48%;
            transform: translate(-50%, -50%);
        }
    }

    #chart1 {
        background: url('@/assets/kuang4.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 2%;
        left: 3%;
        width: 24%;
        height: 31%;
    }

    #chart2 {
        background: url('@/assets/kuang4.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 34%;
        left: 3%;
        width: 24%;
        height: 31%;
    }

    #chart3 {
        background: url('@/assets/kuang4.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 66%;
        left: 3%;
        width: 24%;
        height: 31%;
    }

    #chart4 {
        background: url('@/assets/kuang2.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 2%;
        right: 3%;
        width: 24%;
        height: 95%;

        .details {
            margin-bottom: 35px;
            .title {
                color: #2b8fff;
                margin-top: 0px;
                margin-bottom: 25px;
                margin-left: 10px
            }

            .contain {
                color: #0cb1d5;
                margin-bottom: 23px;
                margin-left: 15px
            }
        }
        .quality{
            background: url('@/assets/jianbian.png') no-repeat;
            .title{
                color: #2b8fff;
                padding-top: 10px;
                margin-top: 0px;
                margin-bottom: 40px;
                margin-left: 10px
            }
            .contain {
                color: #0cb1d5;
                margin-bottom: 23px;
                margin-left: 15px
            }
        }
    }

    #chart5 {
        width: 44%;
        height: 30%;
        position: absolute;
        top: 66%;
        left: 28%;

        // overflow: hidden;
        .smallHeader {
            background: url('@/assets/kuang3.png') no-repeat;
            background-size: 100% 100%;
            // background-position: -80px 0;
            width: 100%;
            height: 21%;
            color: white;
            font-size: 22px;
            font-weight: 500;
            position: relative;

            div {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }

        .tab {
            height: 79%;
            background-color: #142752;

            .title {
                display: flex;
                justify-content: space-between;
                color: #52d2ff;
                height: 20%;

                div {
                    width: 33%;
                    text-align: center;
                    padding-top: 1%;
                    font-size: 20px;
                }
            }

            #list {
                height: 80%;
                overflow: hidden;

                .content {
                    .item {
                        display: flex;
                        justify-content: space-between;
                        color: white;
                        height: 60px;

                        div {
                            width: 33%;
                            height: 100%;
                            text-align: center;
                            font-size: 18px;
                        }
                    }
                }
            }
        }
    }
}
</style>